<!-- 这是用来画【单个折线图】的vue组件 -->

<template>
    <div>
        <e-charts class="chart" :option="option" />
    </div>
</template>
  
<script>

export default {
    name: 'ClientAcc',
    props: ['client_info'],
    data() {
        return {
            dataSize: 1000,
            SES_a: 0.3  //指数平滑的系数
        }
    },

    computed: {
        option() {
            console.log(this.client_info)  //离谱，de这个bug了一通宵

            let ACCs = new Array(this.client_info.length).fill([])
            if (this.client_info[0].acc.length <= this.dataSize) {  //如果当前数据【小于】dataSize，则原封不动
                for (let i = 0; i < ACCs.length; ++i) {
                    ACCs[i] = this.client_info[i].acc
                }
            }
            else {  //如果当前数据【大于】dataSize，则只取最后的 dataSize 长度
                for (let i = 0; i < ACCs.length; ++i) {
                    ACCs[i] = this.client_info[i].acc.slice(this.client_info[i].acc.length - this.dataSize)
                }
            }

            ACCs.forEach(item => {  //一次指数平滑
                for (let i = 1; i < item.length; ++i) {
                    item[i] = this.SES_a * item[i] + (1 - this.SES_a) * item[i - 1]
                }
            });

            let AccSeries = []
            for (let i = 0; i < ACCs.length; ++i) {
                AccSeries.push({
                    type: 'line',
                    //smooth: true,  //曲线图
                    showSymbol: false,  //不出现点点
                    data: ACCs[i],
                    name: `Accuracy of client ${i + 1} `,  //点出现的名字
                })
            }

            let xAxis_data = new Array(this.dataSize).fill('')

            return {
                title: {
                    text: `Visualization of Client Accuracy`,
                    textStyle: {
                        fontFamily: "Arial",
                        // fontWeight: "bold",
                        fontSize: 21
                    },
                    left: "12%",  //左边空出10%
                },
                legend: {  //出现右上角能控制线条的标签与否的标识
                    right: "10%",
                    textStyle: {
                        fontSize: 14
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxis_data,
                    // data: [1,2,3,4,5],
                    axisTick: {
                        show: false  //坐标轴刻度不显示
                    },
                    axisLabel: {
                        show: false,  //不显示x轴刻度标签(也就是那些数字)
                        // interval: 0,  //X轴信息全部展示
                        // rotate: -60,  //60 标签倾斜的角度
                    }
                },
                yAxis: {
                    type: 'value',
                    max: 1.0
                    // boundaryGap: ['0%', 1],  //纵坐标留白
                },
                series: AccSeries,
                tooltip: {  //显示鼠标触发提示框
                    trigger: 'axis'
                }
            }
        }
    },

}
</script>
  
<style scoped>
.chart {
    margin-top: 50px;
    height: 600px;
}
</style>
  